<template>
<div :style="{width:'100%',height: '300px'}" v-loading='loading'>
    <div id="pieChart" :style="{width:'100%',height: '300px'}" v-if="!isShow"></div>
    <state-view :isShow=isShow :description=description :image=image style="margin-bottom:30px" @reload='getData'></state-view>
</div>
 
</template>

<script>
export default {
  props: {
      data:Array
  },
  components: {

  },
  data() {
    return {
      Source1:0,
      Source2:0,
      loading:true,
      isShow:false,//是否展示状态组件
      description:'',//状态组件提示信息
      image:null,//状态组件图片资源
    };
  },
  computed: {
     
  },
  watch: {
   
      
  },
  created() {
   
  },
  mounted() {
   this.getData();
   
  },
  methods: {
    chartFn(){
        // 基于准备好的dom，初始化echarts实例
        var pieChart = this.$echarts.init(document.getElementById('pieChart'));
        pieChart.setOption({
            title:{
                text:'库存质量分析统计', //标题
                //subtext: '测试',  //副标题
                x:'center'  // 位置
            },
            legend: {
                orient: 'vertical', //图例列表的布局朝向。
                left: 'left', //距离左侧的距离
                data: ['合格','不合格']
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            series : [
                {
                    name: '质量',
                    type: 'pie', //类型
                    radius : '60%', //饼图的半径
                    center: ['50%', '60%'], //饼图位置的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
                  
                    data:[
                        {value:this.Source2, name:'不合格'},
                        {value:this.Source1, name:'合格'},
                    ],
                    itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal:{ 
                        label:{ 
                            show: true, 
                            formatter: '{b} : {c} ({d}%)' 
                        }, 
                        labelLine :{show:true} 
                    } 
                }
                }
            ]
        },true)
    },
   getData(){
        if(this.data.length){
              this.data.forEach(val => {
                  if(val.status){
                      this.Source1+=1
                  }else{
                      this.Source2+=1
                  }
              });
            
              this.loading=false
              this.isShow=false
              this.$echarts.init(document.getElementById('pieChart')).clear();
              this.chartFn()
        }else{
          this.$echarts.init(document.getElementById('pieChart')).clear();
          this.loading=false
          this.isShow=true
          this.description='暂无数据'
          this.image=require('@/assets/empty.png') 
        }
   }
     

  },
};
</script>


